<template>
  <div>
    <div>
      <Data />
    </div>
    <div class="Analysisi">
      <div style="width: 50%; height: 450px" id="myChart"></div>
      <div style="width: 50%; height: 450px" id="customer-rating"></div>
      <div style="width: 50%; height: 450px" id="customer-source"></div>
      <div style="width: 50%; height: 450px" id="customer-industry"></div>
      <div style="width: 50%; height: 450px" id="customer-province"></div>
      <div style="width: 50%; height: 450px" id="customer-goods"></div>
    </div>
  </div>
</template>

<script>
import Data from "../../components/Data/dataone.vue";
export default {
  components: {
    Data,
  },
  name: "analysis",
  data() {
    return {
      msg: "Welcome to Your Vue.js App",
    };
  },
  mounted() {
    this.drawLine();
    this.Rating();
    this.Source();
    this.Industry();
    this.Province();
    this.Goods();
  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      // 绘制图表
      myChart.setOption({
        title: {
          text: "客户类型统计",
          subtext: "",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: "50%",
            data: [
              { value: 1048, name: "以成交" },
              { value: 735, name: "等待打款" },
              { value: 580, name: "确定细节" },
              { value: 484, name: "潜在客户" },
              { value: 300, name: "未知" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      });
    },
    Rating() {
      // 基于准备好的dom，初始化echarts实例 客户等级
      let customerRating = this.$echarts.init(
        document.getElementById("customer-rating")
      );
      // 绘制图表
      customerRating.setOption({
        title: {
          text: "客户级别统计",
          subtext: "",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: "50%",
            data: [
              { value: 1048, name: "A" },
              { value: 735, name: "B" },
              { value: 580, name: "C" },
              { value: 484, name: "D" },
              { value: 300, name: "S" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      });
    },
    Source() {
      // 基于准备好的dom，初始化echarts实例 客户等级
      let customerSource = this.$echarts.init(
        document.getElementById("customer-source")
      );
      // 绘制图表
      customerSource.setOption({
        title: {
          text: "客户来源统计",
          subtext: "",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: "50%",
            data: [
              { value: 1048, name: "电话营销" },
              { value: 735, name: "搜索引擎" },
              { value: 580, name: "朋友介绍" },
              { value: 484, name: "其他来源" },
              { value: 300, name: "未知" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      });
    },
    Industry() {
      // 基于准备好的dom，初始化echarts实例 客户等级
      let customerIndustry = this.$echarts.init(
        document.getElementById("customer-industry")
      );
      // 绘制图表
      customerIndustry.setOption({
        title: {
          text: "所属行业统计",
          subtext: "",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: "50%",
            data: [
              { value: 1048, name: "农、林、牧、渔业" },
              { value: 735, name: "采矿业" },
              { value: 580, name: "制造业" },
              { value: 484, name: "电力、燃气及水的生产供应业" },
              { value: 300, name: "建筑业" },
              { value: 200, name: "交通运输、仓储邮政" },
              { value: 70, name: "信息传输、计算机服务和软件" },
              { value: 500, name: "批发零售" },
              { value: 100, name: "金融" },
              { value: 700, name: "未知" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      });
    },
    Province() {
      // 基于准备好的dom，初始化echarts实例 客户等级
      let customerProvince = this.$echarts.init(
        document.getElementById("customer-province")
      );
      // 绘制图表
      customerProvince.setOption({
        title: {
          text: "客户省份分布",
          subtext: "",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: "50%",
            data: [
              { value: 1048, name: "默认省份" },
              { value: 735, name: "未知" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      });
    },
    Goods() {
      // 基于准备好的dom，初始化echarts实例 客户等级
      let customerGoods = this.$echarts.init(
        document.getElementById("customer-goods")
      );
      // 绘制图表
      customerGoods.setOption({
        title: {
          text: "客户商品大类",
          subtext: "",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: "50%",
            data: [
              { value: 1048, name: "肽" },
              { value: 735, name: "小分子肽" },
              { value: 835, name: "未知" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      });
    },
  },
};
</script>

<style lang="scss">
.Analysisi {
  display: flex;
  flex-wrap: wrap;
}
</style>